<html>
    <head>
    <style>
    body {
        background-color:#FFFFFF;
        font: "arial";
        color: #102C49;
        font-size:18px;
    }
    .board{
        position:absolute;
        top:0;
        left:0;
        background-color: #F9F9F9;
        width:500px;
        height:500px;
    }
    img {
        position:absolute;
        width:15px;
        height:15px;
    }
    </style>
</head>


<script type="text/javascript">

    // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  C L A S S

    function ClassBall( identity , left , top  , x,y ) {
        this.identity = identity;
        this.top = top;
        this.left = left;
        this.x=x;
        this.y=y;

        // S T A T I C
        document.write("<img id='ball_" + this.identity + "' src='ball"+parseInt(Math.random()*2+1)+".gif' style='left: 0px; top: 0px;'>");

        this.move = function ( ) {
            this.top  = this.top  + this.y ;
            this.left = this.left + this.x ;
            document.getElementById( "ball_" + this.identity ).style.left = ""+ this.left +"px";
            document.getElementById( "ball_" + this.identity ).style.top  = ""+ this.top +"px";

            //if (this.x>=0) {this.x = this.x - 1;}
            //if (this.y>0) {this.y = this.y - 1;}
            
            this.colision();
        }
        
        this.colision = function( ) {
            if ( this.top  < 0 || this.top  > 500 ) this.y = this.y * -1;
            if ( this.left < 0 || this.left > 500 ) this.x = this.x * -1;
        }

    }

    // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  M A I N 

    document.onmousedown = mouseDown;   //setting event
    
    var totalBalls = 20;
    var arrBalls = [];

    // - - - creatting balls
    for (n=0; n<totalBalls; n++) {
        var objBall = new ClassBall( n , rnd(500),rnd(500)  ,  rnd(6),rnd(6) );
        arrBalls[n]=objBall;
    }
    
    thread();

    // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  F U N C T I O N S 
    function rnd(n){
        return Math.random()*n;
    }

    function thread(){
        for (n=0; n<totalBalls; n++)  
             arrBalls[n].move();

        setTimeout( "thread()" , 20 );
    }
    
    function mouseDown() {                                    //  E V E N T
        var num_arr = parseInt(rnd(totalBalls));
        arrBalls[num_arr].x = rnd(28);
        arrBalls[num_arr].y = rnd(28);
    }
    </script>

<body>
</body>

</html>


<!--
The following class works but you can't create on runtime new balls!!! Leo.


    function ClassWindow( identity , left , top  , x,y ) {
        this.identity = identity;
        this.top = top;
        this.left = left;
        this.x=x;
        this.y=y;

        // S T A T I C
        document.write("<img id='" + this.identity + "' src='ball.gif' style='left: 0px; top: 0px;'>");

        this.move = function ( ) {
            this.top  = this.top  + this.y ;
            this.left = this.left + this.x ;
            document.getElementById( this.identity ).style.left = ""+ this.left +"px";
            document.getElementById( this.identity ).style.top  = ""+ this.top +"px";
            this.colision();
        }

        this.colision = function( ) {
            if ( this.top  < 0 || this.top  > 500 ) this.y = this.y * -1;
            if ( this.left < 0 || this.left > 500 ) this.x = this.x * -1;
        }

    }


    function ball_move( id ) {
        var left = parseInt( document.getElementById( "ball_"+id ).style.left ) + 1;
        var top  = parseInt( document.getElementById( "ball_"+id ).style.top  ) + 1;      
        document.getElementById( "ball_"+id ).style.left = ""+ left +"px";
        document.getElementById( "ball_"+id ).style.top  = ""+ top  +"px";
    }
    function ball_colision ( id ) {
        var left = parseInt( document.getElementById( "ball_"+id ).style.left );
        var top  = parseInt( document.getElementById( "ball_"+id ).style.top  );
        //if ( top  < 0 || top  > 500 ) this.y = this.y * -1;
        //if ( left < 0 || left > 500 ) this.x = this.x * -1;
    }


-->